<script setup lang="ts">
import { useTemplateRef } from 'vue'
import { gsap } from 'gsap'
import { useGsapContext } from '@/hooks'
import { useWindowSize } from '@vueuse/core'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { useScrollGroup } from '@/hooks/reno14-pro.ts'

const { scrollGroup } = useScrollGroup()

const containerRef = useTemplateRef<HTMLDivElement | null>('containerRef')
const { width } = useWindowSize()

const img1Ref = useTemplateRef<HTMLImageElement | null>('img1Ref')
const img2Ref = useTemplateRef<HTMLImageElement | null>('img2Ref')
const lineType = {
  x: 'x',
  y: 'y',
  dot: 'dot',
} as const
type LineType = (typeof lineType)[keyof typeof lineType]

useGsapContext(() => {
  if (!containerRef.value) {
    return
  }

  if (img1Ref.value && img2Ref.value) {
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: containerRef.value,
        start: 'top 90%',
        end: '65% bottom',
        scrub: true,
        invalidateOnRefresh: true,
        ...scrollGroup,
      },
    })
    tl.fromTo(
      img1Ref.value,
      {
        xPercent: () => (width.value >= 1024 ? 10 : 5),
        yPercent: () => (width.value >= 1024 ? 15 : 10),
      },
      {
        xPercent: 0,
        yPercent: 0,
      },
      0,
    ).fromTo(
      img2Ref.value,
      {
        xPercent: () => (width.value >= 1024 ? -10 : -5),
      },
      {
        xPercent: 0,
      },
      0,
    )
  }

  const descItems = containerRef.value?.querySelectorAll(
    'div[data-area="block"]',
  ) as NodeListOf<HTMLDivElement>
  const positions = [0, 1, 2] as const
  const config = {
    x: {
      from: {
        scaleX: 0,
      },
      to: {
        scaleX: 1,
      },
    },
    y: {
      from: {
        scaleY: 0,
      },
      to: {
        scaleY: 1,
      },
    },
    dot: {
      from: {
        opacity: 0,
      },
      to: {
        opacity: 1,
      },
    },
  } as const
  const scrollTrigger: ScrollTrigger.StaticVars = {
    trigger: containerRef.value,
    start: '65% bottom',
    end: 'bottom bottom',
    scrub: true,
    invalidateOnRefresh: true,
    ...scrollGroup,
  }

  descItems.forEach((item) => {
    const lineArea = item.querySelector('div[data-area="line"]')
    if (lineArea) {
      const tl = gsap.timeline({ scrollTrigger })
      positions.forEach((position) => {
        const line = lineArea.querySelector(
          `div[data-position="${position}"]`,
        ) as HTMLDivElement | null
        if (line) {
          const lineType = line.dataset['lineType'] as LineType
          const { from, to } = config[lineType]
          tl.fromTo(line, from, to)
        }
      })
    }

    const textEls = item.querySelectorAll('div[data-area="text"]') as NodeListOf<HTMLDivElement>
    textEls.forEach((text) => {
      if (text) {
        gsap.fromTo(
          text,
          {
            opacity: 0,
          },
          {
            opacity: 1,
            scrollTrigger,
          },
        )
      }
    })
  })
})
</script>

<template>
  <div
    ref="containerRef"
    class="mt-[4.25rem] relative w-full h-[65.8vw] lg:h-[clamp(29.5rem,0.5rem+45.3125vw,44rem)] lg:mt-[clamp(4.25rem,-4.75rem+14.0625vw,8.75rem)]"
  >
    <div class="w-[44.5vw] h-full relative mx-auto lg:w-[36%]">
      <img
        ref="img1Ref"
        class="w-[35.4vw] h-full object-cover object-top absolute top-0 lg:w-[80%]"
        src="@/views/product/reno14-pro/image/4/images-phone-1-pad-1.png.webp"
        alt=""
      />
      <img
        ref="img2Ref"
        class="w-[35.4vw] h-[50vw] object-cover object-top absolute bottom-0 right-0 lg:w-[80%] lg:h-[76%]"
        src="@/views/product/reno14-pro/image/4/images-phone-2-pad-1.png.webp"
        alt=""
      />
    </div>

    <div class="w-full h-full z-1 absolute top-0">
      <div class="w-full h-full relative *:absolute *:aspect-[335/111] *:grid *:content-center">
        <div data-area="block" class="top-[-0.5%] w-[46.6%] lg:top-[-4%] lg:w-[47.5%]">
          <div
            data-area="text"
            class="text-lg leading-[1.3] lg:text-[clamp(1rem,0rem+1.5625vw,1.5rem)]"
          >
            <p>前置 5000 万</p>
            <p>超感光镜头</p>
          </div>
          <div data-area="line" class="flex my-[0.4rem] items-center">
            <div
              data-position="1"
              :data-line-type="lineType.x"
              class="flex-1 h-px bg-[#6e6e6ecc] origin-[right_center]"
            ></div>
            <div
              data-position="0"
              :data-line-type="lineType.dot"
              class="w-[0.25rem] aspect-square bg-[#6e6e6ecc] rounded-full"
            ></div>
          </div>
          <div
            data-area="text"
            class="text-xs *:opacity-75 lg:text-[clamp(0.625rem,-0.125rem+1.1719vw,1rem)]"
          >
            <p>AF 自动对焦</p>
            <p>90° 小广角</p>
            <p>ƒ/2.0 大光圈</p>
          </div>
        </div>

        <div data-area="block" class="top-[28%] w-[46%] lg:top-[25%]">
          <div
            data-area="text"
            class="text-lg leading-[1.3] lg:text-[clamp(1rem,0rem+1.5625vw,1.5rem)]"
          >
            <p>5000 万像素</p>
            <p>潜望长焦摄像头</p>
          </div>
          <div data-area="line" class="flex my-[0.4rem] items-center">
            <div
              data-position="1"
              :data-line-type="lineType.x"
              class="flex-1 h-px bg-[#6e6e6ecc] origin-[right_center]"
            ></div>
            <div
              data-position="0"
              :data-line-type="lineType.dot"
              class="w-[0.25rem] aspect-square bg-[#6e6e6ecc] rounded-full"
            ></div>
          </div>
          <div
            data-area="text"
            class="text-xs *:opacity-75 lg:text-[clamp(0.625rem,-0.125rem+1.1719vw,1rem)]"
          >
            <p>85mm 黄金焦段</p>
            <p>3.5 倍光学变焦 120 | 倍超光影变焦</p>
            <p>OIS 光学防抖</p>
          </div>
        </div>

        <div data-area="block" class="top-[63%] w-[47%] lg:@container lg:w-[47.5%]">
          <div
            data-area="text"
            class="text-lg leading-[1.3] lg:text-[clamp(1rem,0rem+1.5625vw,1.5rem)]"
          >
            <p>5000 万像素超清主摄</p>
          </div>
          <div class="w-full h-px my-[0.4rem] relative">
            <div class="w-full absolute bottom-0">
              <div data-area="line" class="h-[4.16vw] w-full relative *:absolute lg:h-[11cqw]">
                <div
                  data-position="2"
                  :data-line-type="lineType.x"
                  class="bottom-0 w-full h-px bg-[#6e6e6ecc] origin-[right_center]"
                ></div>
                <div
                  data-position="1"
                  :data-line-type="lineType.y"
                  class="bottom-0 right-0 h-full w-px bg-[#6e6e6ecc] origin-[right_top]"
                ></div>
                <div
                  data-position="0"
                  :data-line-type="lineType.dot"
                  class="top-0 right-0 w-[0.25rem] aspect-square bg-[#6e6e6ecc] rounded-full -translate-y-full translate-x-[36%]"
                ></div>
              </div>
            </div>
          </div>
          <div
            data-area="text"
            class="text-xs *:opacity-75 lg:text-[clamp(0.625rem,-0.125rem+1.1719vw,1rem)]"
          >
            <p>OIS 光学防抖</p>
            <p>f/1.8 大光圈</p>
          </div>
        </div>

        <div
          data-area="block"
          class="top-[19%] w-[45%] right-0 justify-items-end lg:@container lg:w-[46%] lg:top-[14%]"
        >
          <div
            data-area="text"
            class="text-lg leading-[1.3] lg:text-[clamp(1rem,0rem+1.5625vw,1.5rem)]"
          >
            <p>色温传感器</p>
          </div>
          <div class="w-full h-px my-[0.4rem] relative">
            <div class="w-full absolute top-0">
              <div data-area="line" class="h-[3.125vw] w-full relative *:absolute lg:h-[7.5cqw]">
                <div
                  data-position="2"
                  :data-line-type="lineType.x"
                  class="top-0 w-full h-px bg-[#6e6e6ecc] origin-[left_center]"
                ></div>
                <div
                  data-position="1"
                  :data-line-type="lineType.y"
                  class="bottom-0 left-0 h-full w-px bg-[#6e6e6ecc] origin-[left_bottom]"
                ></div>
                <div
                  data-position="0"
                  :data-line-type="lineType.dot"
                  class="bottom-0 left-0 w-[0.25rem] aspect-square bg-[#6e6e6ecc] rounded-full translate-y-full -translate-x-[36%]"
                ></div>
              </div>
            </div>
          </div>
        </div>

        <div
          data-area="block"
          class="top-[42%] w-[42%] right-0 justify-items-end lg:w-[44%] lg:top-[38%]"
        >
          <div
            data-area="text"
            class="text-lg leading-[1.3] lg:text-[clamp(1rem,0rem+1.5625vw,1.5rem)]"
          >
            <p>5000 万像素</p>
            <p>超广角摄像头</p>
          </div>
          <div data-area="line" class="flex w-full my-[0.4rem] items-center">
            <div
              data-position="0"
              :data-line-type="lineType.dot"
              class="w-[0.25rem] aspect-square bg-[#6e6e6ecc] rounded-full"
            ></div>
            <div
              data-position="1"
              :data-line-type="lineType.x"
              class="flex-1 h-px bg-[#6e6e6ecc] origin-[left_center]"
            ></div>
          </div>
          <div
            data-area="text"
            class="text-xs *:opacity-75 lg:text-[clamp(0.625rem,-0.125rem+1.1719vw,1rem)]"
          >
            <p>116° 低畸变超广视野</p>
            <p>AF 自动对焦</p>
          </div>
        </div>

        <div
          data-area="block"
          class="top-[63%] w-[45%] right-0 justify-items-end lg:w-[46%] lg:top-[63.3%]"
        >
          <div
            data-area="text"
            class="text-lg leading-[1.3] lg:text-[clamp(1rem,0rem+1.5625vw,1.5rem)]"
          >
            <p>超亮智能闪光灯</p>
          </div>
          <div class="w-full h-px my-[0.4rem] relative">
            <div class="w-full absolute bottom-0">
              <div data-area="line" class="h-[2.6vw] w-full relative *:absolute">
                <div
                  data-position="2"
                  :data-line-type="lineType.x"
                  class="bottom-0 w-full h-px bg-[#6e6e6ecc] origin-[left_center]"
                ></div>
                <div
                  data-position="1"
                  :data-line-type="lineType.y"
                  class="top-0 left-0 h-full w-px bg-[#6e6e6ecc] origin-[left_top]"
                ></div>
                <div
                  data-position="0"
                  :data-line-type="lineType.dot"
                  class="top-0 left-0 w-[0.25rem] aspect-square bg-[#6e6e6ecc] rounded-full -translate-y-full -translate-x-[36%]"
                ></div>
              </div>
            </div>
          </div>
          <div
            data-area="text"
            class="text-xs *:opacity-75 lg:text-[clamp(0.625rem,-0.125rem+1.1719vw,1rem)]"
          >
            <p>创新三灯设计</p>
            <p>独立长焦闪光灯</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
